---
title: 使用 Deno 部署你的 Astro 站点
description: 如何将你的 Astro 站点通过 Deno 部署上线。
sidebar:
  label: Deno Deploy
type: deploy
logo: deno
supports: ['ssr', 'static']
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

你可以使用 Deno 来部署静态或按需渲染的 Astro 站点，既可以选择自己的服务器，也可以选择 [Deno Deploy](https://deno.com/deploy)——这是一个全球分布式系统，能够在边缘节点运行 JavaScript、TypeScript 和 WebAssembly。

本指南包括使用 Deno 在自己的服务器上运行 Astro 站点，以及通过 GitHub Actions 或 Deno Deploy CLI 部署到 Deno Deploy 的介绍。

## 要求

本指南假设你已经安装了 [Deno](https://deno.com/)。

## 项目配置

你的 Astro 项目可以是静态站点或按需渲染的站点。

### 静态站点

你的 Astro 项目默认是一个静态站点。你不需要任何额外的配置就可以使用 Deno 部署一个静态 Astro 站点，或将其部署到 Deno Deploy。

### 按需渲染适配器

要在 Astro 项目中启用基于 Deno 的按需渲染，并部署到 Deno Deploy：

<Steps>
1. 使用你喜欢的包管理器将 [`@deno/astro-adapter` 适配器][Deno adapter] 安装到你的项目依赖中：

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @deno/astro-adapter
     ```
     </Fragment>
   </PackageManagerTabs>

2. 使用下面的修改来更新你的 `astro.config.mjs` 项目配置文件。

    ```js ins={3,6-7}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@deno/astro-adapter';

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });
    ```

3. 使用以下修改来更新 `package.json` 中的 `preview` 脚本。

    ```json del={8} ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }
    ```
    
    你现在可以使用以下命令通过 Deno 在本地预览你生产环境的 Astro 站点。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## 如何部署

你可以在自己的服务器上运行 Astro 站点，也可以通过 GitHub Actions 或使用 Deno Deploy 的 CLI（命令行界面）部署到 Deno Deploy。

### 使用自己的服务器

<Steps>
1. 复制你的项目到服务器上。

2. 使用你喜欢的包管理器安装项目依赖：
   
   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn
     ```
     </Fragment>
   </PackageManagerTabs>

3. 使用你喜欢的包管理器构建你的 Astro 网站：

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

4. 使用以下命令启动你的应用：  

   <StaticSsrTabs>
     <Fragment slot="static">
       ```bash
       deno run -A jsr:@std/http/file-server dist
       ```
     </Fragment>
     
     <Fragment slot="ssr">
       ```bash
       deno run -A ./dist/server/entry.mjs
       ```
     </Fragment>
   </StaticSsrTabs>
</Steps>

### 使用 GitHub Actions 进行部署

如果你的项目存储在 GitHub 上，[Deno Deploy 网站](https://dash.deno.com/) 将指导你设置 GitHub Actions 来部署你的 Astro 站点。

<Steps>
1. 将你的代码推送到公开或私有的 GitHub 存储仓库。

2. 使用你的 GitHub 账号登录 [Deno Deploy](https://dash.deno.com/)，然后单击 [New Project](https://dash.deno.com)。

3. 选择你的存储仓库和要部署的分支，并选择 **GitHub Action** 模式。（你的 Astro 站点需要一个构建步骤，不能使用 Automatic 模式。）

4. 在你的 Astro 项目中，创建一个名为 `.github/workflows/deploy.yml` 的新文件，并粘贴下面的 YAML 内容。这类似于 Deno Deploy 提供的 YAML，但还包括你的 Astro 站点所需的其他步骤。

    <StaticSsrTabs>
      <Fragment slot="static">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]
        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # 用于 Deno Deploy 身份认证
              contents: read # 用于克隆仓库
            steps:
              - name: Clone repository
                uses: actions/checkout@v4
              # 没有使用 npm？将 `npm ci` 更改为 `yarn install` 或 `pnpm i`
              - name: Install dependencies
                run: npm ci
              # 没有使用 npm？将 `npm run build` 更改为 `yarn build` 或 `pnpm run build`
              - name: Build Astro
                run: npm run build
              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO：替换为 Deno Deploy 项目名称
                  entrypoint: jsr:@std/http/file-server
                  root: dist
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]
        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # 用于 Deno Deploy 身份认证
              contents: read # 用于克隆仓库
            steps:
              - name: Clone repository
                uses: actions/checkout@v4
              # 没有使用 npm？将 `npm ci` 更改为 `yarn install` 或 `pnpm i`
              - name: Install dependencies
                run: npm ci
              # 没有使用 npm？将 `npm run build` 更改为 `yarn build` 或 `pnpm run build`
              - name: Build Astro
                run: npm run build
              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO：替换为 Deno Deploy 项目名称
                  entrypoint: dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>

5. 提交此 YAML 文件，然后推送到你配置的部署分支后，将会自动开始部署！

   你可以在 GitHub 存储库页面上的 "Actions" 选项卡上，或在 [Deno Deploy](https://dash.deno.com) 上跟查看部署进度。
</Steps>

### 使用 CLI 进行部署

<Steps>
1. 安装 [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl)。

    ```bash
    deno install -gArf jsr:@deno/deployctl
    ```

2. 使用你喜欢的包管理器构建你的 Astro 站点：

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

3. 运行 `deployctl` 进行部署！

    <StaticSsrTabs>
      <Fragment slot="static">
        ```bash
        cd dist && deployctl deploy jsr:@std/http/file-server
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```bash
        deployctl deploy ./dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>

    你可以在 [Deno Deploy](https://dash.deno.com) 上跟踪所有部署。

4. (可选) 为了将构建和部署简化为一个命令，可以在 `package.json` 中添加一个 `deploy-deno` 脚本。

    <StaticSsrTabs>
      <Fragment slot="static">
        ```json ins={9}
        // package.json
        {
          // ...
          "scripts": {
          "dev": "astro dev",
          "start": "astro dev",
          "build": "astro build",
          "preview": "astro preview",
          "deno-deploy": "npm run build && cd dist && deployctl deploy jsr:@std/http/file-server"
          }
        }
        ```
      </Fragment>
      <Fragment slot="ssr">
    ```json ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
        "deno-deploy": "npm run build && deployctl deploy ./dist/server/entry.mjs"
      }
    }
    ```
      </Fragment>
    </StaticSsrTabs>

    然后你可以使用以下命令一步构建和部署你的 Astro 站点。

    ```bash
    npm run deno-deploy
    ```
</Steps>

[Deno adapter]: https://github.com/denoland/deno-astro-adapter
